<script setup lang="ts">
import {onMounted, ref} from 'vue'
import Goods from "@/components/Goods.vue";
import Category from "@/views/Layout/Components/LayoutCategory.vue";
import Good from "@/views/Home/GoodProduct.vue";
import {getGoodProuctAPI, getGoodsAPI, getHotProuctAPI} from "@/api/Home";
import Banner from "@/views/Home/LayoutBanner.vue";

const newGood = ref([])
const getGoodData = async ()=>{
  const res = await getGoodProuctAPI()
  console.log(res)
  newGood.value = res.result
}
const hotGoods = ref([])
const getHotGoods = async ()=>{
  const res = await getHotProuctAPI()
  console.log(res)
  hotGoods.value = res.result.slice(0,4)
}
const goodsList = ref([])
const getGoodsList = async()=>{
  const res = await getGoodsAPI()
  console.log(res)
  goodsList.value = res.result
}
onMounted(()=>{
  getGoodData()
  getHotGoods()
  getGoodsList()
})
</script>

<template>

  <!-- banner图 -->
  <Banner />

  <Good title="新鲜好物" subTitle="欢迎抢购">
    <ul>
      <li v-for="item in newGood">
        <img :src="item.picture">
        <p>{{ item.name }}</p>
        <span>￥{{ item.price }}</span>
      </li>
    </ul>
  </Good>
  <Good title="热卖商品" subTitle="好物分享">
    <ul>
      <li v-for="item in hotGoods">
        <img :src="item.picture">
        <h3>{{ item.title }}</h3>
        <span>{{ item.alt }}</span>
      </li>
    </ul>
  </Good>

  <!-- 分类 -->

  <Category v-for="item in goodsList" :key="item.id" :name="item?.name" :pic="item?.picture" :goods="item.goods">
    <Goods :goods="item.goods" />
  </Category>


</template>

<style scoped lang="less">
.content ul {
  display: flex;
  justify-content: space-between;
  text-align: center;
}
.content ul li{
  margin: 10px;
}
.content img{
  width: 100%;
}

ul li span{
  color:red;
  display: inline-block;
  margin-top: 8px;
}
</style>